<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020\9\15 0015
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>admin-goods-addgoods</title>
    <%@include file="/views/common/headerStyle.jsp" %>
</head>
<body>
<div class="container">
    <%@include file="/views/common/header.jsp" %>
    <div class="row main_box">
        <div class="col-sm-3"><%@include file="/views/common/leftMenu.jsp" %></div>
        <div class="col-sm-9">

            <div id="app" >
                <form action="" method="post">
                    <div class="form-group">
                        <label for="goodsName">产品名称</label>
                        <input type="text" class="form-control" id="goodsName" name="goodsName" v-model="goodsName"  aria-describedby="nameHelp">
                        <small id="nameHelp" class="form-text text-muted">产品的名称.</small>
                    </div>
                    <div class="form-group">
                        <label for="price">显示价格</label>
                        <input type="text" class="form-control" id="price" name="price" v-model="price"  aria-describedby="priceHelp">
                        <small id="priceHelp" class="form-text text-muted">显示的价格.</small>
                    </div>
                    <div class="form-group">
                        <label for="originalPrice">原价</label>
                        <input type="text" class="form-control" id="originalPrice" name="originalPrice" v-model="originalPrice"  aria-describedby="originalPriceHelp">
                        <small id="originalPriceHelp" class="form-text text-muted">产品的原价(划横线的价格).</small>
                    </div>
                    <div class="form-group">
                        <label for="model_type">产品分类:</label>
                        <select class="form-control" id="goodsCat" name="goodsCat" v-model="goodsCat">
                            <c:forEach items="${goodsCatList}" var="item">
                                <option value="${item.catId}">${item.catName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="model_type">模型分类:</label>
                        <select class="form-control" id="model_type" name="modId" v-model="modId" @change="onSelectedMod($event)">
                            <c:forEach items="${productTypeList}" var="item">
                                <option value="${item.id}">${item.model_name}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <!--属性及其子项-->
                    <div v-if="attrList!=undefined  && attrList.length>0" class="form-group product_attr">

                        <div v-for="(item, index) in attrList" class="p_list_box">

                            <div class="attr_name">{{ index }} - {{ item.attr_name }}</div>
                            <div class="attr_values">

                                <div class="form-check form-check-inline" v-for="(m, i) in item.attributeValues">
                                    <input class="form-check-input" v-model="attrList[index].attributeValues[i].checked" type="checkbox" :data-m="index" :data-n="i" :name="'attr_'+item.id" :id="'Radios'+item.id+'_'+i" :value="m" @click="onClickCheckAttr($event,m)">
                                    <label class="form-check-label" :for="'Radios'+item.id+'_'+i">
                                        {{ m.attr_value }}
                                    </label>
                                </div>

                            </div>

                        </div>

                        <button type="button" v-on:click="testPrice2">填写选中价格</button>

                        <!--排列组合列表-->
                        <table class="table table-striped">
                            <tbody>
                            <tr v-for="(item, index) in priceItemTableCheckedSn">
                                <td v-for="(m, i) in item.values">{{m.attr_value}}</td>
                                <td><input type="text" :data-index="index" v-model="priceItemTableCheckedSn[index].price" :value="item.price" v-on:input="setItemPrice($event,item)"  class="form-control" /></td>
                                <td>{{item.sn}}</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="form-group">
                        <label for="goodsDesc">产品描述</label>
                        <input type="text" class="form-control" id="goodsDesc" name="goodsDesc" v-model="goodsDesc" >
                    </div>


                    <button type="button" class="btn btn-primary" v-on:click="subMitFrm($event)">保存</button>
                </form>


                {{ message }} {{ modSelected }}

            </div>






        </div>
    </div>


    <%@include file="/views/common/footer.jsp" %>
</div>
</body>
<%@include file="/views/common/footerStyle.jsp" %>
<script>
    $(document).ready(function(){

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue1111gg!',
                modSelected: '',
                attrList:[],//属性列表
                priceList:[],//计算价格的列表
                priceItemTable:[],//存储排列组合算法的列表
                priceItemTableChecked:[],//存储排列组合算法的列表(加了checked:true)
                priceItemTableCheckedSn:[],//最终存的数组(提交数据用的)
                //下面是提交表单数据
                goodsName:"",
                price:"",
                originalPrice:"",
                goodsCat:"",
                modId:"",
                goodsDesc:""
            },
            methods: {
                requestGet: function (url, data,method='GET') {
                    return new Promise(function(resolve, reject) {
                        $.ajax({
                            type: method,
                            url: url,
                            data:data,
                            dataType: "json",
                            contentType: "application/json;charset=utf-8",
                            success: function(res) {
                                resolve(res);
                            }
                        })
                    });
                },
                getStoreList(){
                    this.time = Math.random();//丛植页面随机数
                    var _this= this;
                    let data1 = {'keywords':this.keywords,'time':Math.random()};
                    this.requestGet('./index/store/storeList', data1).then(function(res){
                        //var datas = $.parseJSON( res );
                        var datas = res;
                        console.log(datas.data);
                        datas = datas.data;
                        _this.store_list = datas.data;

                    });

                },
                /**
                 * 表单选中
                 */
                onSelectedMod(e){
                    var _this= this;
                    _this.time = Math.random();//丛植页面随机数
                    var mod_id = e.target.value;

                    let data1 = {'mod_id':mod_id,'time':Math.random()};
                    this.requestGet('${BASE_PATH}admin/goods/getattrlist', data1).then(function(res){
                        //var datas = $.parseJSON( res );
                        var datas = res;
                        console.log(datas);
                        if(datas.code=='0'){
                            console.log(0);
                            _this.priceItemTableCheckedSn=[];//清空最终展示的数组

                            _this.attrList = datas.data;
                            _this.putPriceList(datas.data);//把计算价格的属性存入数组中
                            _this.resetPriceItem();//重新给价格数组中存入一些必要的值
                        }else{
                            console.log(1);

                        }



                    });


                },
                /**
                 * 处理价格数组
                 */
                putPriceList(attrList){
                    var _this = this;
                    _this.priceList = [];
                    attrList.forEach(function(item,index){
                        if(item.attributeValues.length>0){
                            _this.priceList.push(item.attributeValues);
                        }
                    });

                },
                /**
                 * 处理价格数组(只处理选中状态的checked=true)
                 */
                putPriceListChecked(price_list){
                    var _this = this;
                    var tmp = [];
                    let arr = price_list.pop();
                    for(var i=0;i<arr.length;i++){

                        if(price_list.length>0){
                            _this.putPriceListChecked(price_list);
                        }
                        if(arr[i].checked) tmp.push(arr[i]);
                    }
                    _this.priceItemTableChecked.push(tmp);


                },
                resetPriceItem(){
                    let _this =this;
                    let arr = [];
                    arr = _this.priceList.concat();

                    _this.priceItemTable = [];
                    _this.digui(arr);
                    console.log(_this.priceItemTable);

                    return false;
                },
                testPrice2(){
                    var _this =this;
                    let arr = [];
                    arr = _this.priceItemTable.concat();

                    _this.priceItemTableChecked = [];
                    _this.putPriceListChecked(arr);
                    //console.log(_this.priceItemTableChecked);

                    let tmp = _this.priceItemTableChecked.concat();
                    var res = _this.cartesianProductOf(...tmp);

                    //console.log(res); //把这个二维数组遍历处理下
                    let list = res.map(function(item,index){
                        //pitc is priceItemTableChecked
                        let pitc = {'sn':'','price':0,'values':[]};
                        item.forEach(function(m,i){
                            pitc.sn += m.attr_id+"-"+m.id+"|";
                            pitc.values.push(m);
                        });
                        return pitc
                    });
                    //console.log(list);
                    _this.priceItemTableCheckedSn = list;

                    return false;
                },
                /**
                 * 递归循环数组(给数组加一个checked:false)
                 */
                digui(price_list){
                    let _this = this;
                    let tmp = [];
                    let arr = price_list.pop();
                    for(var i=0;i<arr.length;i++){

                        if(price_list.length>0){
                            _this.digui(price_list);
                        }
                        arr[i].checked = false;
                        tmp.push(arr[i]);
                    }
                    _this.priceItemTable.push(tmp);

                },
                cartesianProductOf() {
                    return Array.prototype.reduce.call(arguments, function (a, b) {
                        var ret = [];
                        a.forEach(function (a) {
                            a.values = [];
                            b.forEach(function (b) {
                                ret.push(a.concat([b]));
                            });

                        });
                        return ret;
                    }, [[]]);
                },
                /**
                 * 属性的排列组合
                 * */
                cartesianProductOf_bak() {
                    return Array.prototype.reduce.call(arguments, function (a, b) {
                        var ret = [];
                        a.forEach(function (a) {
                            b.forEach(function (b) {
                                ret.push(a.concat([b]));
                            });
                        });
                        return ret;
                    }, [[]]);
                },
                /**
                 * 选中
                 */
                onClickCheckAttr(event,item){
                    console.log(event);
                    console.log(event.target.checked);
                    var _this = this;
                    var checked  = event.target.checked;
                    //修改值的坐标
                    var attr_m  = event.target.getAttribute('data-m');
                    var attr_n  = event.target.getAttribute('data-n');
                    if(checked){
                        _this.priceItemTable[attr_m][attr_n].checked = true;
                    }else{
                        _this.priceItemTable[attr_m][attr_n].checked = false;
                    }

                },
                /**
                 * 价格设置(没用了,使用的v-model双向绑定数据)
                 */
                setItemPrice(event,item){
                    //console.log(event);
                    let _this = this;
                    let value = event.target.values;
                    //修改值的索引
                    //let index  = event.target.getAttribute('data-index');
                    //_this.priceItemTableCheckedSn[index].price = parseInt(value) ;


                },
                /**
                 * 表单提交
                 */
                subMitFrm(event){
                    //1.获得产品名称
                    //2.产品分类
                    //3.获得模型分类
                    //4.图片
                    //5.介绍
                    //6.价格


                    this.time = Math.random();//丛植页面随机数
                    let _this= this;
                    let goodsName = _this.goodsName?_this.goodsName:"123";
                    let price = _this.price;
                    let originalPrice = _this.originalPrice;
                    let goodsCat = _this.goodsCat;
                    let modId = _this.modId;
                    let goodsDesc = _this.goodsDesc;
                    let goods_prices = _this.priceItemTableCheckedSn;
                    let data1 = JSON.stringify({'goodsName':goodsName,'price':price,'originalPrice':originalPrice,'goodsCat':goodsCat,'modId':modId,'goodsDesc':goodsDesc,'goods_prices':goods_prices,'time':Math.random()});
                    this.requestGet('${BASE_PATH}admin/goods/insertgoods', data1,'POST').then(function(res){
                        //var datas = $.parseJSON( res );
                        var datas = res;
                        console.log(datas.data);
                        if(datas.code=="0"){
                            layer.msg('添加成功！');
                            location.reload();
                        }else{
                            layer.msg('添加失败！');
                        }

                    });


                }


        },

            created () {
                this.time = Math.random();//丛植页面随机数
                var _this= this;
            },
            computed: {
                text() {return this.currentRate.toFixed(0) + '%'}
            }
        });

    });
</script>
</html>

